import React, { useEffect, useState } from "react";
import './recommend.css';
import { NavBar,NoticeBar,Animate } from '@nutui/nutui-react';
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { fetchComments } from '../store/index';
import { MaskClose, Fabulous, Receipt,ArrowLeft } from '@nutui/icons-react'
import { Image } from 'antd'

import $ from '../../axios'

export default function recommend() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [state, setState] = useState(useSelector(data => { return data.comments }))


    useEffect(() => {
        dispatch(fetchComments());
    }, []);

    const Del = async (id) => {
        await $.post('/delComment', { id }).then(val => {
            setState(val.data.data)
        })
    }

    return (
        <div>
            <div className="goodgood">
                <div className="good1">
                    <NavBar
                        back={
                            <>
                                <ArrowLeft width={20} height={20} onClick={() => navigate('/')} />
                            </>
                        }>
                        <h4>好物推荐</h4>
                    </NavBar>
                </div>
                <div className="notice">
                    <NoticeBar
                        content="就一条数据，别点那个x号！"
                        scrollable
                    />
                </div>
                <div className="comment">
                    <div className="card">
                        {state.map((item, index) => (
                            <Animate key={item._id} type="slide-bottom" action="click">
                                <div className="boxcard" key={item._id}>
                                    <div className="box">
                                        <div className="box1">
                                            <img src={item.head} />
                                        </div>
                                        <div className="box2">
                                            <h3>{item.name}</h3>
                                            <h5>{item.fans}万粉丝</h5>
                                        </div>
                                        <div className="s1">
                                            <p type="primary"
                                                onClick={() => {
                                                    Del(item._id)
                                                }}><MaskClose /></p>
                                        </div>
                                    </div>
                                    <div className="box3">
                                        <span>{item.content}</span>
                                    </div>
                                    <div className="box4">
                                        <Image.PreviewGroup
                                            preview={{
                                                onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`)
                                            }}
                                        >
                                            <Image width={80} height={120} src={item.img1} />
                                            <Image width={80} height={120} src={item.img2} />
                                            <Image width={80} height={120} src={item.img3} />
                                        </Image.PreviewGroup>
                                    </div>
                                    <div className="box5">
                                        <p className="p1">{item.read}万阅读</p>
                                        <p className="p2"><Fabulous /><h5>{item.like}</h5></p>
                                        <p className="p3"><Receipt /><h5>{item.comment}</h5></p>
                                    </div>
                                </div>
                            </Animate>
                        ))}
                    </div>
                </div>
            </div>
        </div >
    );
}